import React, { Component } from 'react';
import { connect } from 'dva';
import { Input, Form } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";

interface Props extends FormComponentProps {
  data?: {
    id: number
  },
  title?: string,
  require?: boolean,
  type?: string,
  form, 
  validator?: Function,
  typeMessage?: string,
  inputType?: string,
  disabled?: boolean,
  placeholder?: string,
}

@connect()
class OneItem extends Component<Props, any> {
  render(){
    const { form, title, type, require, validator, inputType, typeMessage, disabled, placeholder } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 12 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 6 },
        sm: { span: 14 },
      },
    };
    return (
      <Form.Item
        {...formItemLayout}
        label={title}
      >
        {getFieldDecorator(type, {
          rules: [{
            required: require, message: title,
          }, {
            validator: validator
          }, {
            type: inputType, message: typeMessage,
          }],
        })(
          <Input placeholder={ placeholder || title} disabled={disabled}/>
        )}
      </Form.Item>
    )
  }
}

export default OneItem;